<template>
<div class="main">
  <div class="header">
    <div class="title" :class="{'close-title':!collapsed}">
      <span v-if="!collapsed">通风系统</span>
      <img v-else src="./../assets/logo.png" alt="">
    </div>
    <div class="tagger-btn">
      <a-icon @click="collapsed = !collapsed" :type="collapsed?'align-left':'align-right'" />
    </div>
    <div class="user-operate">
      <!--        <a-dropdown>-->
      <!--          <a-avatar style="backgroundColor:#106ec4" icon="user" />-->
      <!--          <a-menu slot="overlay" @click="dropdown">-->
      <!--            <a-menu-item key="user">-->
      <!--              <a-icon type="user" />个人信息-->
      <!--            </a-menu-item>-->
      <!--            <a-menu-item key="password">-->
      <!--              <a-icon type="lock" />修改密码-->
      <!--            </a-menu-item>-->
      <!--            <a-menu-item key="logout">-->
      <!--              <a-icon type="poweroff" />退出系统-->
      <!--            </a-menu-item>-->
      <!--          </a-menu>-->
      <!--        </a-dropdown>-->
    </div>
  </div>
  <div class="content">
    <div class="menu" :class="{'close-menu':collapsed}">
      <a-menu
          :default-selected-keys="[getActionMenu]"
          :default-open-keys="['disinfect','detect']"
          mode="inline"
          theme="dark"
          :inline-collapsed="collapsed"
          @click="goToPath"
      >
        <a-sub-menu v-for="item in menuList" :key="item.key">
          <span slot="title"><a-icon :type="item.icon" /><span>{{item.title}}</span></span>
          <a-menu-item v-for="child in item.children" :key="child.key"><a-icon :type="child.icon" />{{child.title}}</a-menu-item>
        </a-sub-menu>

      </a-menu>
    </div>
    <div class="view">
      <router-view/>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return {
      collapsed:false,
      menuList:[
        {
          title:'通风系统清洗消毒',
          icon:'insurance',
          key:'disinfect',
          children:[
            {
              title:'清洗消毒地图',
              icon:'environment',
              key:'disinfectMap',
            },
            {
              title:'清洗消毒列表',
              icon:'database',
              key:'disinfectData',
            },
          ]
        },
        {
          title:'通风系统卫生检测',
          icon:'filter',
          key:'detect',
          children:[
            {
              title:'卫生检测地图',
              icon:'environment',
              key:'detectMap',
            },
            {
              title:'卫生检测列表',
              icon:'database',
              key:'detectData',
            },
          ]
        }
      ]
    }
  },
  computed:{
    getActionMenu(){
      return this.$store.state.activeMenu || 'disinfectMap';
    }
  },
  methods:{
    dropdown({key}){
      console.log(key)
    },
    goToPath(val){
      console.log(val)
      this.$router.push({
        name:val.key,
      })
      this.$store.commit('setActiveMenu',val.key)
    },

  }
}
</script>
<style lang="scss">
.main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .menu{
    width: 200px;
    background-color: #001529;
    transition: width 0.3s 0s linear;
    .ant-menu-dark{
      color: white;
    }
    .title{
      color: white;
      font-size: 22px;
      overflow: hidden;
      height: 60px;
      font-weight: bolder;
      line-height: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 2px solid $info-color;
    }
  }
  .close-menu{
    width: 0px;
    overflow: hidden;
    transition: width 0.2s 0s linear;
  }
  .header{
    height: 60px;
    background-color: $info-color;
    display: flex;
    .title{
      width: 70px;
      display: flex;
      justify-content: center;
      img{
        height: 100%;
      }
    }
    .close-title{
      display: flex;
      align-items: center;
      color: white;
      font-weight: bolder;
      width: 200px;
      font-size: 20px;
      background-color: #001529;
    }
    .tagger-btn{
      color: white;
      font-size: 22px;
      display: flex;
      align-items: center;
      padding-left: 10px;
    }
    .user-operate{
      display: flex;
      align-items: center;
    }
  }
  .content{
    display: flex;
    flex: 1;
    .view{
      flex: 1;
    }
  }

}
</style>